{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{% static 'app01/plugins/bootstrap-3.4.1-dist/css/bootstrap.css' %}">
    <style>
        .acount {
            width: 400px;
            margin: 0 auto;

        }
    </style>
</head>
<body>


<div class="acount container">
    <h1 style="text-align: center">{{ title }}</h1>
    <form method="post" novalidate>
        {% csrf_token %}
        {% for field in form %}
            {% if 'code' in field.name %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    <div class="clearfix">
                        <div class="col-md-6" style="padding-left: 0;">{{ field }}</div>
                        <div class="col-md-6">
                            <button type="submit" class="btn btn-default" id="get-code">点击获取验证码</button>
                        </div>
                        <span style="font-size: 50%; color: red; vertical-align: top">{{ field.errors.0 }}</span>

                    </div>
                </div>
            {% else %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
                    <span style="font-size: 50%; color: red; vertical-align: top">{{ field.errors.0 }}</span>
                </div>
            {% endif %}
        {% endfor %}
        <button type="submit" class="btn btn-primary">{{ title }}</button>
        {% if '登 录' in title %}
            <a href="/register/" style="margin-left: 20px">注册</a>
        {% else %}
            <a href="/login/" style="margin-left: 20px">登录</a>
        {% endif %}

    </form>
</div>
<script src="{% static 'app01/js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'app01/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
<script>
    $(function () {
        btndBtnRegister();
    })

    function btndBtnRegister() {
        $("#get-code").click(function () {
            $.ajax({
                url: "/send/code/" + "?tpl",
                type: "post",
                data: {
                    phone: $("#id_phone").val()
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        console.log(res)
                    }
                }
            })
        })

    }


</script>
</body>

</html>